<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../publics/jstl.jsp" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="${ctx}/resource/static/css/common.css?v=2" rel="stylesheet">
  <link href="${ctx}/resource/static/css/picker.css" rel="stylesheet">
  <link href="${ctx}/resource/static/css/swiper.min.css" rel="stylesheet">
  <title>汽车列表</title>
</head>
<body>
  <form class="search" method="post" action="${ctx}/h5/home/list">
    <div class="swiper-container swiper-index">
      <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-active">
          <a href="javascript:void(0)">
            <img src="${ctx}/resource/static/temp/ad.png" width="100%">
          </a>
        </div><!--swiper-slide-->
        <div class="swiper-slide">
          <a href="javascript:void(0)">
            <img src="${ctx}/resource/static/temp/ad.png" width="100%">
          </a>
        </div><!--swiper-slide-->
        <div class="swiper-slide">
          <a href="javascript:void(0)">
            <img src="${ctx}/resource/static/temp/ad.png" width="100%">
          </a>
        </div><!--swiper-slide-->
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <div class="search-items">
      <div class="search-item flex">
        <div class="flex-2-1">
              <label>取车城市</label>
              <div class="sel">
                <div  class="sel-label text-ellipse">南京</div>
                <select name="fromcity" data-target="#fromshop">
                  <option value="1">南京</option>
                </select>
              </div>
        </div>
        <div class="flex-2-1 text-right">
              <label>还车城市</label>
              <div class="sel">
                <div  class="sel-label text-ellipse">南京</div>
                <select name="backcity" data-target="#backshop">
                  <option value="1">南京</option>
                </select>
              </div>
        </div>        
      </div>
      <div class="search-item flex">
        <div class="flex-2-1">
              <label>取车门店</label>
              <div class="sel">
                <div  class="sel-label text-ellipse">南京秦淮河营地店</div>
                <select name="fromshop" id="fromshop">
                  <option value="1">南京秦淮河营地店</option>
                </select>
              </div>
        </div>
        <div class="flex-2-1 text-right">
              <label>还车门店</label>
              <div class="sel">
                <div  class="sel-label text-ellipse">南京秦淮河营地店</div>
                <select name="backshop" id="backshop">
                  <option value="1">南京秦淮河营地店</option>
                </select>
              </div>              
        </div>        
      </div>
      <div class="search-item flex">
        <div class="flex-3-1">
              <label>取车时间</label>
              <div class="date-picker">
                <div class="date-picker-text">${startDay}<span>08:00</span></div>
                <input class="date-picker-put" type="txet" value="${startFullTime} 08:00" name="fromdate">
              </div>
        </div>
        <div class="order-duration flex-3-1">
            <p>
              <span>2天</span>
              <input id="days" name="days" value="2" type="hidden"/>
            </p>
        </div>
        <div class="flex-3-1 text-right">
              <label>还车时间</label>
              <div class="date-picker">
                <div class="date-picker-text">${endDay}<span>20:00</span></div>
                <input class="date-picker-put" type="txet" value="${endFullTime} 20:00" name="backdate">
              </div>
        </div>        
      </div>            
    </div>
    <div class="form-action">
      <input id="source" name="source" value="wxindex" type="hidden"/>
      <button type="submit" class="btn btn-block" style="font-size: 17px;">去选车</button>
    </div>
  </form>
  <div class="index-hot">
    <h4>当季热门</h4>
    <ul class="flex">
      <li class="flex-3-1"><a href="javascript:void(0)"><img data-info="图片上传4x3比例的图片" src="${ctx}/resource/static/images/hotshanghai.png" width="100%"><span>上海</span></a></li>
      <li class="flex-3-1"><a href="javascript:void(0)"><img src="${ctx}/resource/static/images/hothaikou.png" width="100%"><span>海口</span></a></li>
      <li class="flex-3-1"><a href="javascript:void(0)"><img src="${ctx}/resource/static/images/hotchengdu.png" width="100%"><span>成都</span></a></li>
      <li class="flex-3-1"><a href="javascript:void(0)"><img src="${ctx}/resource/static/images/hotwuxi.png" width="100%"><span>无锡</span></a></li>
      <li class="flex-3-1"><a href="javascript:void(0)"><img src="${ctx}/resource/static/images/hotsanya.png" width="100%"><span>三亚</span></a></li>
      <li class="flex-3-1"><a href="javascript:void(0)"><img src="${ctx}/resource/static/images/hothangzhou.png" width="100%"><span>杭州</span></a></li>
    </ul>
</div>

  <script src="${ctx}/resource/static/js/jquery.min.js"></script>
  <script src="${ctx}/resource/static/js/fastclick.js"></script>
  <script src="${ctx}/resource/static/js/picker.js"></script>
  <script src="${ctx}/resource/static/js/picker.zh-CN.js"></script>
  <script src="${ctx}/resource/static/js/user.js?v=1"></script>
  <script src="${ctx}/resource/static/js/swiper.min.js"></script>
  <script>
    jQuery(function(){

      var swiperOrder = new Swiper('.swiper-index', {
        pagination: {
          el: '.swiper-pagination'
        },
        loop: true,
        on: {
          // transitionStart: function(){
          //   $('.swiper-button-next, .swiper-button-prev').css('opacity', '0.3');
          // },
          // transitionEnd: function(){
          //   $('.swiper-button-next, .swiper-button-prev').css('opacity', '1');
          // }
        }
      });


      //日期选择
      $('.date-picker-put').each(function(){
        var $datePickerText = $(this).siblings('.date-picker-text')
        var picker = new Picker(this, {
          container: '.js-super-picker-container',
          format: 'YYYY-MM-DD HH:mm',
          rows: 3,
          increment: {
            minute: 30,
          },
          text: {
            title: '请选择日期 / 时间',
            cancel: '取消',
            confirm: '确认',
          },
          pick: function(s){
            console.log(s, 'pick');
            var date = picker.getDate();
            if(date - new Date() < 1000 * 60 * 0){
              console.log(date - new Date())
              mobile.modal.alert({content: '时间不能小于当前时间'});
            }
            $datePickerText.html( fixZero(date.getMonth() + 1) + '月' + fixZero(date.getDate()) + '日' + '<span>' + fixZero(date.getHours()) + ':' + fixZero(date.getMinutes()))
            setTimeout(function(){
              $('.order-duration p span').html(getDiff().diff + '天')
              $('#days').val(getDiff().diff);
            }, 50);
        }
        });

        $(this).data('picker', picker)

        function fixZero(n){
          return n > 9 ? n : '0' + n;
        }

      });

      //获取diff对象
      function getDiff(){
        var date1 = $('.date-picker-put[name=fromdate]').data('picker');
        var date2 = $('.date-picker-put[name=backdate]').data('picker');
        var diff = date2.getDate().getTime() - date1.getDate().getTime();
        diff = Math.floor( diff / 10000 ) * 10000; //fix 秒问题

        return {
          diff: Math.ceil(diff/ (1000 * 60 * 60 * 24)),
          from: date1,
          back: date2
        }
      }


      //表单提交
      $('.search').on('submit', function(){
        var diffDu = getDiff(),
            d = new Date();

        if(d > diffDu.from.getDate() || d > diffDu.back.getDate()){
            mobile.modal.alert({content: '时间不能小于当前时间'});
            return false;
        }
        if(diffDu.diff <= 0){
            mobile.modal.alert({content: '时间不能小于1天'});
            return false;
        }
      });


      //城市更新|店铺更新
      $('.sel select').on('change', function(){
        var city = $(this).val();
        var target = $(this).data('target');
        var $target;

        $(this).siblings('.sel-label').html($(this).find('option:checked').html());

        if(target){
          $target = $(target)
          $target.html('');

          //todo 根据 city 获取 shop
          var shop = [
            {id: 1, name: '万达店'},
            {id: 1, name: '机场店'},
          ]

          $.each(shop, function(){
            $target.append('<option id="'+ this.id +'">'+ this.name +'</option>');
          });

          $target.trigger('change');          

        }
      });
    })
  </script>
</body>
</html>